<template>
	<view class="screenshotRecord">
		<view class="upload">
			<uni-file-picker ref="files" :auto-upload="true" v-model="imageValue" @fail="fail"  limit="3" title="最多选择3张图片" @progress="progress" @success="successPicture"  fileMediatype="image" @select="selectPicture" @delete="deletePicture"></uni-file-picker>
			<button class="my-button" size="default"  plain="true" @click="btnUpload">提交</button>
		</view>
		<view class="sample">
			<view class="sample-text">
				样例 注意：1.清晰展示群人数   2.清晰展示打卡截图
			</view>
			<view class="sample-img" @click="previewImg">
				<img src="https://pic.imgdb.cn/item/660ba8e09f345e8d033f81b3.png" alt="" />
			</view>
		</view>
		<view class="record">
			<view class="statusType ">
				<view class="all" :class="{'selected-type':params.status == 3}" @click="changeType(3)">
					全部{{ params.status == 3 ? '（' + total + '）' : ''}}
				</view>
				<view class="pass" :class="{'selected-type':params.status == 2}" @click="changeType(2)">
					已通过{{ params.status == 2 ? '（' + total + '）' : ''}}
				</view>	
				<view class="no-pass" :class="{'selected-type':params.status == 1}" @click="changeType(1)">
					未通过{{ params.status == 1 ? '（' + total + '）' : ''}}
				</view>
				<view class="await" :class="{'selected-type':params.status == 0}" @click="changeType(0)">
					待审核{{ params.status == 0 ? '（' + total + '）' : ''}}
				</view>
			</view>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="avatar">
					<image :src="item.avatarUrl" mode=""></image>
				</view>
				<view class="userName">
					{{item.userName}}
				</view>
				<view class="time">
					{{getTime(item.createTime)}}
				</view>
				<view :class="item.status == 0 ? 'status unknown' : (item.status == 1 ? 'status nopass' : 'status pass')">
					{{item.status == 0 ? '未审核' : (item.status == 1 ? '未通过' : '已通过')}}
				</view>
				
				<button class="but-delete" size="default"  plain="true" @click="btnDelete(item._id)">删除</button>
				
				<view class="reason" v-if="item.reason">
					{{item.reason}}
				</view>
				<view class="screenshotBox">
						<view class="screenshot-img" v-for="(item2,index2) in item.pictureUrl" :key="item._id">
							<image :src="item2" mode=""></image>
						</view>
						
					
				</view>
			</view>
		
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import util from '../../util/index.js'
	import moment from "moment";
	const imageValue = ref([])
	const imageUrl = ref([])
	const list = ref([])
	const params = ref({
		pageNo:1,
		uuid:'',
		status:3
	})
	const total = ref(0)
	const pageNo = ref(1)
	import {
		onLoad,	
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		pathToBase64,
		
	} from 'image-tools'
	const userInfo = ref({})
	const files = ref()
	onLoad(() => {
		const userInfoStorage = uni.getStorageSync('userInfo')
		userInfo.value = userInfoStorage
		params.value.uuid = userInfoStorage._id
		getList()
	})
	const getTime = (time) => {
		return moment(time).format("YYYY-MM-DD HH:mm:ss")
	}
	const btnDelete = (id) => {
		uni.showModal({
			title: '提示',
			content: '是否确定删除',
			success: function(res) {
				if (res.confirm) {
					uni.request({
						url:util.baseUrl + '/wxapi/screenshotRecord/deleteOne',
						method:'POST',
						data:{
							id:id
						},
						success:(res) => {
							if(res.data.code == 200) {
								list.value = []
								params.value.pageNo = 1
								getList()
							}
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
	const changeType = (type) => {
		console.log('type',type)
		params.value.status = type
		params.value.pageNo = 1
		list.value = []
		getList()
	}
	const selectPicture = (res) => {
		console.log('selectPicture',res)
	}
	const previewImg = () => {
		// 预览图片
				uni.previewImage({
					urls: ['https://pic.imgdb.cn/item/660ba8e09f345e8d033f81b3.png'],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
	}
	const btnUpload = async () => {
		console.log('files.value.filesList.length',files.value.filesList.length)
		if(files.value.filesList.length != 3) {
			uni.showToast({
				icon:'none',
				title: '上传的图片为3张',
				duration: 1500
			})
			return 
		}
		uni.showLoading({
			title:'上传中'
		})
		imageUrl.value = []
		const res1 = await pathToBase64(files.value.filesList[0].path)
		const res2 = await pathToBase64(files.value.filesList[1].path)
		const res3 = await pathToBase64(files.value.filesList[2].path)
		const url1 = await uni.request({
			method:'POST',
			url:util.baseUrl + '/wxapi/user/uploadImg',
			data:{
				
				avatarUrlBase64:res1
			}
		})
		imageUrl.value.push(url1.data.data)
		const url2 = await uni.request({
			method:'POST',
			url:util.baseUrl + '/wxapi/user/uploadImg',
			data:{
			
				avatarUrlBase64:res2
			}
		})
		imageUrl.value.push(url2.data.data)
		const url3= await uni.request({
			method:'POST',
			url:util.baseUrl + '/wxapi/user/uploadImg',
			data:{
				
				avatarUrlBase64:res3
			}
		})
		imageUrl.value.push(url3.data.data)
		console.log('imageUrl',imageUrl.value)
		const userInfo = uni.getStorageSync('userInfo')
	    uni.hideLoading();
		uni.request({
			url:util.baseUrl + '/wxapi/screenshotRecord/upload',
			method:'POST',
			data:{
				userName:userInfo.userName,
				avatarUrl:userInfo.avatarUrl,
				pictureUrl:imageUrl.value,
				uuid:userInfo._id,
			},
			success:(res) => {
				files.value.clearFiles()
				console.log('files.value',files.value)
				params.value.pageNo = 1
				list.value = []
				getList()
				uni.showToast({
					title:'上传成功'
				})
			}
		})
	
	}
	onReachBottom(() => {
		console.log('触底')
		params.value.pageNo++
		getList()
	})
	const getList = () => {
		
		uni.request({
			url:util.baseUrl + '/wxapi/screenshotRecord/getList',
			data:params.value,
			success:(res) => {
				console.log('res',res)
				if(res.data.code == 200) {
					list.value.push(...res.data.data.result)
					total.value = res.data.data.total
				}
			}
		})
	} 

</script>

<style lang="scss" scoped>
	.screenshotRecord {
		min-height: 100vh;
		padding: 40rpx;
		background-color: #fff;
		::v-deep .uni-file-picker__container {
			margin-top: 10rpx !important;
		}
		.sample {
			margin-top: 20rpx;
			color: #9f9f9f;
			.sample-img {
				height: 300rpx;
				width: 120rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.sample-text {
				
			}
		}
		.upload {
			position: relative;
			border-bottom: 2rpx solid #eee;
			padding-bottom: 50rpx;
			.img-add {
				width: 150rpx;
				height: 150rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			button{
				position: absolute;
				top: 0;
				
				right: 0;
				background: linear-gradient(to left, #fdd21f, #ffe537);
				height: 60rpx;
				// border-top-left-radius: 40rpx;
				// border-bottom-left-radius: 40rpx;
				
				font-weight: 700;
				font-size: 32rpx;
				width: 150rpx;
				
				line-height: 60rpx;
				text-align: center;
			}
		}
		.record {
			margin-top: 40rpx;
			border-top: 2rpx solid #eee;
			.statusType {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-around;
			}
			.selected-type {
				color: #ffc639;
			}
			.item {
				position: relative;
				margin-bottom: 50rpx;
				.avatar {
					height: 80rpx;
					width: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				button{
					position: absolute;
					top: 20rpx;
					
					right: 0;
					background: linear-gradient(to left, #fdd21f, #ffe537);
					height: 50rpx;
					// border-top-left-radius: 40rpx;
					// border-bottom-left-radius: 40rpx;
					
					font-weight: 700;
					font-size: 28rpx;
					width: 120rpx;
					
					line-height: 50rpx;
					text-align: center;
				}
				.userName {
					position: absolute;
					left: 100rpx;
					top: 0;
				}
				.status {
					padding: 0rpx 16rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 10rpx;
					position: absolute;
					font-size: 28rpx;
					right: 150rpx;
					top: 20rpx;
					color:#fff;
				}
				.reason {
					margin-top: 6rpx;
					font-size: 28rpx;
					}
				.unknown {
					background-color: #909399;
					
				}
				.pass{
					background-color: #67c23a;
				}
				.nopass {
					background-color:#f56c6c;
				}
				.time {
					position: absolute;
					left: 100rpx;
					top: 50rpx;
					font-size: 28rpx;
					color: #9f9f9f;
				}
				
				.screenshotBox {
					height: 250rpx;
					margin-top: 10rpx;
					width:100%;
					display: flex;
					justify-content: space-between;
					.screenshot-img {
						width: 230rpx;
						height: 230rpx;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>